/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import {ConfigProvider, Slider} from '@alifd/next';

@ConfigProvider.config

class DashboardCard extends React.Component {
  static displayName = 'DashboardCard';

  static propTypes = {
    locale: PropTypes.object,
    data: PropTypes.object,
    height: PropTypes.number,
  };

  render() {
    const {data = {}, height, locale = {}} = this.props;
    return (
      < div >
      {
        data.modeType === 'notice' ? (
          < div data - spm - click = {'gostr=/aliyun;locaid=notice'} >
          < Slider style = {
    {
      marginBottom: data.modeList.length > 1 ? 20 : 10
    }
  }
    arrows = {false} >
      {
        data.modeList.map((item, index) = > (
          < div key = {index} className = {'slider-img-wrapper'} >
        < div
        className = {'alert alert-success'}
        style = {
    {
      minHeight: 120, backgroundColor
    :
      '#e9feff'
    }
  }
  >
  <
    div
    className = {'alert-success-text'}
    style = {
    {
      fontWeight: 'bold'
    }
  }>
    {
      locale.importantReminder0
    }
  <
    /div>
    < strong
    style = {
    {
      color: '#777a7e'
    }
  }>
  <
    span > {item.title} < /span>
    < /strong>
    < strong >
    < span >
    < a
    style = {
    {
      marginLeft: 10, color
    :
      '#33cde5'
    }
  }
    href = {item.url}
    target = {'_blank'}
      >
      {locale.viewDetails1}
      < /a>
      < /span>
      < /strong>
      < /div>
      < /div>
  ))
  }
  <
    /Slider>{' '}
    < /div>
  ) :
    (
    < div
    className = {'dash-card-contentwrappers'}
    style = {
    {
      height: height || 'auto'
    }
  }
    data - spm - click = {`gostr=/aliyun;locaid=${data.modeType}`
  }
  >
  <
    h3
    className = {'dash-card-title'} > {data.modeName} < /h3>
      < div
    className = {'dash-card-contentlist'} >
      {
        data.modeList
          ? data.modeList.map(item = > (
          < div className = {'dash-card-contentitem'} >
            < a href = {item.url} target = {'_blank'} >
        {item.title}
        < /a>
    {
      item.tag === 'new' ? (
        < img
        style = {
      {
        width: 28, marginLeft
      :
        2, verticalAlign
      :
        'text-bottom'
      }
    }
      src = {'//img.alicdn.com/tps/TB1pS2YMVXXXXcCaXXXXXXXXXXX-56-24.png'}
      alt = ""
        / >
    ) :
      (
        ''
      )
    }
    {
      item.tag === 'hot' ? (
        < img
        style = {
      {
        width: 28, marginLeft
      :
        2, verticalAlign
      :
        'text-bottom'
      }
    }
      src = {'//img.alicdn.com/tps/TB1nusxPXXXXXb0aXXXXXXXXXXX-56-24.png'}
      alt = ""
        / >
    ) :
      (
        ''
      )
    }
  <
    /div>
  ))
  :
    ''
  }
  <
    /div>
    < /div>
  )
  }
    {
      ' '
    }
  <
    /div>
  )
    ;
  }
}

export default DashboardCard;
